<template>
    <div class="comment">
        <div class="title border-bottom"><span>用户评论</span></div>
        <div class="content border-bottom" v-for="item in list" :key="item.id">
            <div class="content-title">
                <div class="star">
                    <div class="bg">★★★★★</div>
                    <div class="current" :style="item.widthStyle">★★★★★</div>
                </div>
                <div class="time">
                    <span class="user">{{ item.user }}</span>
                    <span>{{ item.time }}</span>
                </div>
            </div>
            <div class="desc">
                <p>{{ item.desc }}</p>
                <ul class="img" v-if="item.imgUrl">
                    <li v-for="(img, index) in item.imgUrl" :key="index">
                        <div>
                            <img :src="img" alt="">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="more">查看全部评论</div>
    </div>
</template>

<script>
export default {
  name: 'DetailComment',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/variables.styl'
.comment
    .title
        line-height .88rem
        padding-left .2rem
        span
            padding-left .1rem
            border-left .06rem solid $bgColor
    .content
        padding .3rem .2rem
        .content-title
            position relative
            height .42rem
            .star
                position absolute
                left .3rem
                line-height .42rem
                .bg
                    color #ccc
                .current
                    overflow hidden
                    position absolute
                    top 0
                    left 0
                    right 0
                    bottom 0
                    z-index 2
                    color orange
            .time
                position absolute
                right .3rem
                line-height .42rem
        .desc
            line-height .42rem
            .img
                &:after
                    content ""
                    display block
                    clear both
                li
                    float left
                    width 33.33%
                    div
                        padding .07rem
                        img
                            width 100%
    .more
        line-height .8rem
        text-align center
        border-bottom .2rem solid #eee
</style>
